import React from 'react';
import { Row, Col, Card, Button, Statistic, Carousel } from 'antd';
import { 
  RocketOutlined, 
  SafetyCertificateOutlined, 
  TeamOutlined,
  TrophyOutlined,
  ArrowRightOutlined
} from '@ant-design/icons';
import styled from 'styled-components';
import {useNavigate} from "react-router-dom";
import config from "@/constant";

const HeroSection = styled.div`
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 120px 0 80px;
  text-align: center;
  margin-top: 64px;
`;

const HeroTitle = styled.h1`
  font-size: 48px;
  font-weight: bold;
  margin-bottom: 20px;
  
  @media (max-width: 768px) {
    font-size: 32px;
  }
`;

const HeroSubtitle = styled.p`
  font-size: 20px;
  margin-bottom: 40px;
  opacity: 0.9;
  
  @media (max-width: 768px) {
    font-size: 16px;
  }
`;

const Section = styled.div`
  padding: 80px 0;
  
  @media (max-width: 768px) {
    padding: 40px 0;
  }
`;

const SectionTitle = styled.h2`
  text-align: center;
  font-size: 36px;
  margin-bottom: 60px;
  color: #333;
  
  @media (max-width: 768px) {
    font-size: 28px;
    margin-bottom: 40px;
  }
`;

const FeatureCard = styled(Card)`
  text-align: center;
  height: 100%;
  border: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s;
  
  &:hover {
    transform: translateY(-5px);
  }
  
  .ant-card-body {
    padding: 40px 20px;
  }
`;

const FeatureIcon = styled.div`
  font-size: 48px;
  color: #1890ff;
  margin-bottom: 20px;
`;

const StatsSection = styled.div`
  background: #f5f5f5;
  padding: 80px 0;
  
  @media (max-width: 768px) {
    padding: 40px 0;
  }
`;

const StatCard = styled.div`
  text-align: center;
  margin-bottom: 30px;
`;

const Home: React.FC = () => {
  const navigate = useNavigate();

  const features = [
    {
      icon: <RocketOutlined />,
      title: '技术创新',
      description: '持续的技术创新，为客户提供最前沿的解决方案'
    },
    {
      icon: <SafetyCertificateOutlined />,
      title: '品质保证',
      description: '严格的质量管理体系，确保每个产品都达到最高标准'
    },
    {
      icon: <TeamOutlined />,
      title: '专业团队',
      description: '经验丰富的专业团队，为您提供全方位的服务支持'
    },
    {
      icon: <TrophyOutlined />,
      title: '行业领先',
      description: '在行业内保持领先地位，获得众多客户信赖'
    }
  ];

  const stats = [
    { title: '服务客户', value: 1000, suffix: '+' },
    { title: '项目完成', value: 500, suffix: '+' },
    { title: '团队规模', value: 100, suffix: '+' },
    { title: '服务年限', value: 10, suffix: '年' }
  ];

  return (
    <div>
      {/* 横幅区域 */}
      <HeroSection>
        <div className="container">
          <HeroTitle>欢迎来到我们的官网</HeroTitle>
          <HeroSubtitle>
            专业的团队，优质的服务，为您提供最完美的解决方案
          </HeroSubtitle>
          <Button type="primary" size="large" style={{ marginRight: 16 }} onClick={() => navigate('/products')}>
            了解更多
          </Button>
          <Button type="info" size="large" style={{ color: 'white', borderColor: 'white' }} onClick={() => navigate('/contact')}>
            联系我们
          </Button>
        </div>
      </HeroSection>

      {/* 特色服务 */}
      <Section>
        <div className="container">
          <SectionTitle>我们的特色</SectionTitle>
          <Row gutter={[24, 24]}>
            {features.map((feature, index) => (
              <Col xs={24} sm={12} lg={6} key={index}>
                <FeatureCard>
                  <FeatureIcon>{feature.icon}</FeatureIcon>
                  <h3 style={{ marginBottom: 16, fontSize: 20 }}>{feature.title}</h3>
                  <p style={{ color: '#666', lineHeight: 1.6 }}>{feature.description}</p>
                </FeatureCard>
              </Col>
            ))}
          </Row>
        </div>
      </Section>

      {/* 数据统计 */}
      <StatsSection>
        <div className="container">
          <Row gutter={[24, 24]}>
            {stats.map((stat, index) => (
              <Col xs={12} sm={6} key={index}>
                <StatCard>
                  <Statistic
                    title={stat.title}
                    value={stat.value}
                    suffix={stat.suffix}
                    valueStyle={{ color: '#1890ff', fontSize: 36 }}
                  />
                </StatCard>
              </Col>
            ))}
          </Row>
        </div>
      </StatsSection>

      {/* 联系我们 */}
      <Section>
        <div className="container">
          <Row gutter={[48, 24]} align="middle">
            <Col xs={24} md={12}>
              <h2 style={{ fontSize: 32, marginBottom: 20 }}>准备开始您的项目？</h2>
              <p style={{ fontSize: 16, color: '#666', marginBottom: 30, lineHeight: 1.6 }}>
                我们期待与您合作，为您提供最优质的服务。立即联系我们，开始您的成功之旅。
              </p>
              <Button type="primary" size="large" icon={<ArrowRightOutlined />}>
                立即咨询
              </Button>
            </Col>
            <Col xs={24} md={12}>
              <div style={{ 
                background: '#f0f2f5', 
                padding: 40, 
                borderRadius: 8,
                textAlign: 'center'
              }}>
                <h3 style={{ marginBottom: 20 }}>联系方式</h3>
                <p style={{ marginBottom: 10 }}>📞 {config.phone}</p>
                <p style={{ marginBottom: 10 }}>📧 {config.email}</p>
                <p>📍 {config.address}</p>
              </div>
            </Col>
          </Row>
        </div>
      </Section>
    </div>
  );
};

export default Home;